<template>
  <div>
    <!-- layout：属性决定显示的部分
    prev:上一页；
    pager：页码列表：
    total：总条目数
    size:每页显示的页面数量
    @就是v-on：on事件~
       @current-change:currentpage当前页码会发生变化
     @size-change=""pagesize改变时触发
     sticky:固定头帘???height=""
     -->
    <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      :page-size="pageSize"
      :page-sizes="[2, 4, 5, 10]"
      layout="prev,pager,next,sizes,jumper"
      :total="total"
    >
    </el-pagination>
    <el-table :data="postList">
      <el-table-column label="ID编号" prop="id" width="80">
        <!-- 获取文章列表，并进行渲染： -->
      </el-table-column>
      <el-table-column label="文章标题" prop="title"> </el-table-column>
      <!-- el-table-column label="内容" prop="content" width="100"
     获取文章列表，并进行渲染：div需要改造成为p标签
    el-table-column -->
      <el-table-column label="作者" prop="user.nickname" width="100">
      </el-table-column>
      <el-table-column label="创建时间" prop="user.create_date" width="100">
      </el-table-column>
      <!-- 加载图片： -->
      <el-table-column label="缩略图" width="200">
        <!-- 获取文章cover缩略图，自定义标签，并进行渲染： -->
        <template slot-scope="scope">
          <!-- 只要用作用域插槽获取到内部的回传数据, 那么我们想要的当前 item 就在
            scope.row 里面 -->
          <img
            v-if="scope.row.cover.length > 0"
            :src="scope.row.cover[0].url"
            class="thumbnail"
          />
          <img v-else src="../assets/3.jpg" class="thumbnail" />
        </template>
      </el-table-column>
      <el-table-column label="编辑" width="300">
        <!-- 自己创建一个编辑按钮 -->
        <template>
          <el-button type="success" plain>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      postList: [],
      total: 0,
    };
  },
  created() {
    // 一进入页面，就加载页码：最后，封装成一个函数：
    this.loadPage();
  },
  methods: {
    currentChange(newPageIndex) {
      // 先修改数据，再赋值，再去渲染页面！！！十分重要！！
      this.pageIndex = newPageIndex;
      this.loadPage();
    },
    // 点击页码尺寸改变每页显示的页码长度
    sizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.loadPage();
    },
    // 封装一个函数：加载页码
    loadPage() {
      this.$axios({
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        },
        url: "/post",
      }).then((res) => {
        console.log(res.data);
        this.postList = res.data.data;
        this.total = res.data.total;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.thumbnail {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
</style>